<script setup>
const route = useRoute()
const router = useRouter()
const props = defineProps({
    articles: {
        type: Array,
        default: () => []
    }
})
const goToArticle = (item) => {
    router.push({ path: '/article', query: { title: item.title } })
}
</script>
<template>
    <div class="article-lists">
        <div class="list" v-for="(item, index) in articles" :key="index">
            <div class="icon"></div>
            <div class="content">
                <h2 class="list-title">{{ item.title }}</h2>
                <p class="text">{{ item.content }}</p>
                <div class="list-footer">
                    <div class="list-footer-left">
                        <div class="list-footer-left-avatar"></div>
                        <div class="list-footer-left-name">{{ item.author }}</div>
                        <div class="list-footer-right-time">发布于 {{ item.time }}</div>
                    </div>
                    <a href="#" @click="goToArticle(item)">查看详情>></a>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.article-lists {
    width: 100%;

    .list {
        display: flex;
        padding: 24px;
        width: 100%;
        background: var(--bg-color);
        margin: 10px 0;

        .icon {
            width: 50px;

            @media (max-width: 820px) {
                display: none;
            }
        }

        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .list-title {
            font-weight: 600;
        }

        .text {
            font-size: 15px;
        }

        .list-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .list-footer-left {
                display: flex;
                align-items: center;

                .list-footer-left-avatar {
                    min-width: 30px;
                    height: 30px;
                    background: #000;
                    border-radius: 50%;
                    margin-right: 10px;
                }

                .list-footer-left-name {
                    display: flex;
                    align-self: center;
                }

                .list-footer-right-time {
                    font-size: 14px;
                    color: #aaa;
                    margin-left: 10px;
                }
            }

            a {
                color: #d436ff;
            }
        }

        @media (max-width: 820px) {
            .list-title {
                font-weight: 300;
            }

            .text {
                font-size: 10px;
            }

            .list-footer {
                .list-footer-left {
                    .list-footer-left-avatar {
                        margin-right: 0px;
                    }

                    .list-footer-left-name {
                        font-size: 6px;
                    }

                    .list-footer-right-time {
                        font-size: 6px;
                        margin: 0;
                    }
                }

                a {
                    font-size: 6px;
                }
            }
        }
    }
}
</style>